<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>day07_demo01</title>
<script>
	//confirm
	function f1(){
		var b=confirm("你确定要清空购物车吗?");
		console.log(typeof(b));
		
		if(b){
			console.log("购物车已清空");
		}
	}
	
	//周期性定时器
	
	function f2(){
		//启动周期性定时器
		//每隔1000ms调用一次.
		var num=5;
		var span=document.getElementById("result");
		//返回的id时定时器的唯一标志,用来停止定时器
		var id=setInterval(function(){
			console.log(num);
			span.innerHTML=num;
			if(num==0){
				clearInterval(id);
				console.log("Duang");
				
			}
			num--;
			
		},1000);
		//当前方法f2()相当于主线程,setInterval()
		//相当于启动了支线程,二者并发执行,不互相等待,
		//主线程在启动支线程后立即向下执行,
		//支线程需要等待1000ms后执行第一次
		//(下面的语句先执行)
		console.log("BOOM");
	}
	
	//一次性定时器
	var id;
	function f3(){
		console.log("显示广告");
		
		//启动一次性定时器,推迟5000ms调用函数;
		//调用一次后自动结束
		id=setTimeout(function(){
			console.log("自动关闭广告");
		},5000);
		
	}
	//取消广告自动关闭功能
	function f4(){
		//在定时器没有自动停止前,可以调用该方法提前停止
			clearTimeout(id);
	}
	
	
	
	
	
	
</script>

</head>
<body>
	<input type="button" value="清空"
		onclick="f1();"/>
	<input type="button" value="倒计时"
		onclick="f2();"/>
	<span id="result"></span>
	
	<input type="button" value="广告"
		onclick="f3();"/>
	
	<input type="button" value="看广告"
		onclick="f4();"/>
	
</body>
</html>












